import { defineStore } from "pinia";
import { ref,reactive } from 'vue'; //{}分部暴露
import axios from 'axios'; //默认暴露
import { nanoid } from 'nanoid';

// export var useJokeStore = defineStore("count",{
//     actions:{
//       async GetAsync(){
//       //从result下面结构出data,在data下面结构出来content,content取别名为joke。
//         var {data:{content:joke}} = await axios.get("/api/api/rand.qinghua?format=json");
//         //将获取的字符串包装成对象
//         let JokeTemp = {
//             "id":nanoid(),
//             joke
//         }
//         this.jokeArr.unshift(JokeTemp);
//     }
//     },
//     state(){
//         return{
//             //返回对象里的数组对象
//             // jokeArr:[
//             // {
//             //     "id": "1",
//             //     "joke": "为什么程序员喜欢在海边工作？因为那里有很多海量数据！"
//             // },
//             // {
//             //     "id": "2",
//             //     "joke": "为什么程序员总是喜欢喝咖啡？因为他们需要不断地编译！"
//             // },
//             // {
//             //     "id": "3",
//             //     "joke": "为什么程序员不喜欢大海？因为他们害怕海量数据！"
//             // }
//             // ],

//             //as:断言，打包票localStorage.getItem("jokeArr")得到的就是string类型
//             //|| []:保证第一次调用不会出现null.unshift()的错误 ★
//             jokeArr:JSON.parse(localStorage.getItem("jokeArr") as string) || [],
//         }
//     }
// });

//组合式Store
export var useJokeStore = defineStore("count",()=>{
   const jokeArr = reactive(JSON.parse(localStorage.getItem("jokeArr") as string) || []); //使用reactive创建响应式数组
    async function GetAsync(){
      //从result下面结构出data,在data下面结构出来content,content取别名为joke。
        var {data:{content:joke}} = await axios.get("/api/api/rand.qinghua?format=json");
        //将获取的字符串包装成对象
        let JokeTemp = {
            "id":nanoid(),
            joke
        }
        jokeArr.unshift(JokeTemp);
    }
    //抛出定义好的属性和方法。★
    return{jokeArr,GetAsync};
});